<template>
  <div class="hello">
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        @change="change()">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions1">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 组件选项，绑定到组件属性
      pickerOptions1: {
        // 控制是否禁用，返回一个布尔值，此例是如果选择的时间大于当前时间就禁用
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        // 附加文本
        shortcuts: [{
          // 附加文本
          text: '今天',
          //点击附加文本的回调，picker为vue实例对象
          //触发子组件的pick事件，传入时间，选中这个时间
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
    };
  },
  created(){
    // console.log(this.value1);
  },
  methods: {
    change(){
      console.log(this.value1);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
